<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bootstrap自适应网页by袁亚男</title>
    <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
      <div class="container">
        <a href="#" class="navbar-brand">bootstrap自适应网页by袁亚男</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#demo"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="demo">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><div class="nav-link">前端知识</div></li>
          <li class="nav-item"><div class="nav-link">后端知识</div></li>
          <li class="nav-item"><div class="nav-link">数据库知识</div></li>
        </ul>
      </div>
    </nav>
    <section class="p-5  bg-dark text-light text-center text-sm-start">
      <div class="container">
        <div class="d-flex">
          <div>
            <h1>成为一个<span class="text-warning">前端工程师</span></h1>
            <p class="my-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et distinctio dolorem repellat perspiciatis molestias ratione voluptatum quia suscipit accusantium sapiente eos, id veniam mollitia alias voluptas. Nam omnis reiciendis dignissimos!</p>
            <button class="btn btn-primary btn-lg">开始编程之旅</button>
          </div>
          <img src="./img/showcase.svg" alt="#" class="w-50 d-none d-md-block">
        </div>
      </div>
    </section>  
    <section class="p-5 bg-primary text-light">
      <div class="container">
        <div class="d-md-flex justify-content-between align-items-center">
          <h3 class="mb-3">现在注册账号开始编程之旅吧</h3>
          <div class="input-group news-input">
            <input type="text" class="form-control" placeholder="请输入你的邮箱">
            <button class="btn btn-dark btn-lg">注册</button>
          </div>
        </div>
      </div>
    </section>  
    <section class="p-5">
      <div class="container">
        <div class="row g-4">
          <div class="col-md">
            <div class="card bg-dark text-light">
              <div class="card-body text-center">
                <div class="card-title">前端知识</div>
                <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, necessitatibus. Repudiandae maxime ipsum architecto in omnis alias totam, excepturi qui molestias minus id debitis quo pariatur rerum, dolorem consequatur quam!</div>
                <a href="#" class="btn btn-primary mt-2">学习前端</a>
              </div>
            </div>
          </div>
          <div class="col-md">
            <div class="card bg-secondary text-light">
              <div class="card-body text-center">
                <div class="card-title ">前端知识</div>
                <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, necessitatibus. Repudiandae maxime ipsum architecto in omnis alias totam, excepturi qui molestias minus id debitis quo pariatur rerum, dolorem consequatur quam!</div>
                <a href="#" class="btn btn-dark mt-2">学习前端</a>
              </div>
            </div>
          </div>
          <div class="col-md">
            <div class="card bg-dark text-light">
              <div class="card-body text-center">
                <div class="card-title ">前端知识</div>
                <div class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, necessitatibus. Repudiandae maxime ipsum architecto in omnis alias totam, excepturi qui molestias minus id debitis quo pariatur rerum, dolorem consequatur quam!</div>
                <a href="#" class="btn btn-primary mt-2">学习前端</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="p-5">
      <div class="container">
        <div class="row justify-content-between align-items-center">
          <div class="col-md">
            <img src="./img/1.svg" alt="#" class="img-fluid">
          </div>
          <div class="col-md p-5">
            <h2>课程介绍</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, tempore repellendus perspiciatis recusandae quasi officia!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus ab reiciendis adipisci vel, libero at, dolor repellendus vitae laborum dolores, explicabo nemo suscipit quam iste nulla omnis soluta voluptatem dignissimos.</p>
            <a href="" class="btn btn-light">查看更多</a>
          </div>
        </div>
      </div>
    </section>
    <section class="p-5 bg-dark text-light">
      <div class="container">
        <div class="row justify-content-between align-items-center">
          
          <div class="col-md p-5">
            <h2>课程介绍</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, tempore repellendus perspiciatis recusandae quasi officia!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus ab reiciendis adipisci vel, libero at, dolor repellendus vitae laborum dolores, explicabo nemo suscipit quam iste nulla omnis soluta voluptatem dignissimos.</p>
            <a href="#" class="btn btn-light">查看更多</a>
          </div>
          <div class="col-md">
            <img src="./img/2.svg" alt="#" class="img-fluid">
          </div>
        </div>
      </div>
    </section>
    <section class="p-5">
      <div class="container">
        <h2 class="text-center">常见问题</h2>
        <div class="accordion accordion-flush" id="accordionFlushExample">
          <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingOne">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
            Accordion Item #1
          </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
          <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
          </div>
          </div>
          <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingTwo">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
            Accordion Item #2
          </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
          <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
          </div>
          </div>
          <div class="accordion-item">
          <h2 class="accordion-header" id="flush-headingThree">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
            Accordion Item #3
          </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
          <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
          </div>
          </div>
          </div>
      </div>
    </section>
    <section class="p-5 bg-primary">
      <div class="container">
        <h2 class="text-center text-light">讲师介绍</h2>
        <p class="text-center text-white mb-5">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil incidunt ipsam, quia molestiae nesciunt labore dolor est, corrupti sapiente sint, quae placeat autem iste culpa cupiditate totam molestias officia laborum.</p>
        <div class="row g-4">
          <div class="col-md-6 col-lg-3">
            <div class="card bg-light">
              <div class="card-body text-center">
                <img src="./img/01-man.jpeg" alt="#" class="mb-3 rounded-circle">
                <h3 class="card-title">歪果仁</h3>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat aspernatur, necessitatibus molestiae asperiores fugiat, ad nihil debitis nemo illum labore porro deleniti recusandae nam architecto quis libero consequuntur corporis exercitationem?</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-3">
            <div class="card bg-light">
              <div class="card-body text-center">
                <img src="./img/02-man.jpeg" alt="#" class="mb-3 rounded-circle">
                <h3 class="card-title">歪果仁</h3>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat aspernatur, necessitatibus molestiae asperiores fugiat, ad nihil debitis nemo illum labore porro deleniti recusandae nam architecto quis libero consequuntur corporis exercitationem?</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-3">
            <div class="card bg-light">
              <div class="card-body text-center">
                <img src="./img/03-man.jpeg" alt="#" class="mb-3 rounded-circle">
                <h3 class="card-title">歪果仁</h3>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat aspernatur, necessitatibus molestiae asperiores fugiat, ad nihil debitis nemo illum labore porro deleniti recusandae nam architecto quis libero consequuntur corporis exercitationem?</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-lg-3">
            <div class="card bg-light">
              <div class="card-body text-center">
                <img src="./img/04-man.jpeg" alt="#" class="mb-3 rounded-circle">
                <h3 class="card-title">歪果仁</h3>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat aspernatur, necessitatibus molestiae asperiores fugiat, ad nihil debitis nemo illum labore porro deleniti recusandae nam architecto quis libero consequuntur corporis exercitationem?</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="p-5">
      <div class="container">
        <h2 class="text-center mb-4">联系我们</h2>      
        <ul class="list-group list-group-flush">
          <li class="list-group-item">电话:132xxxx7725</li>
          <li class="list-group-item">邮箱:yyn139xxxx0794@126.com</li>
          <li class="list-group-item">地址:中国人名共和国</li>
          </ul>
      </div>
    </section>
    <section class="p-5 bg-dark text-white text-center">
      <div class="container">
        <p class="lead">hellow-word &copy;快乐编程</p>
      </div>
    </section>
    <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
  </body>
</html>
